<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>add phpkrpano</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="/js/fileinput.min.js" type="text/javascript"></script>
    <script src="/js/locales/fr.js" type="text/javascript"></script>
    <script src="/js/locales/es.js" type="text/javascript"></script>
    <script src="/themes/explorer-fa/theme.js" type="text/javascript"></script>
    <script src="/themes/fa/theme.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <form enctype="multipart/form-data">
        <div class="form-group">
            <div class="col-md-12">
                <input id="imgUpload" name="imgUpload" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
            </div>
        </div>
    </form>

    <div  class="col-md-12"></div>
    <div  class="col-md-12"></div>
    <div class="input-group-btn text-right" style="margin-top:20px">
        <div class="col-md-2">
            <button type="button" class="btn btn-block btn-primary" id="upload_img">上传图片</button>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-block btn-primary " id="publish_img" disabled="true" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> 持续发布中......">立即发布
            </button>
        </div>
    </div>
</div>


</body>
<script>
    var timestamp = 0;
    var index = 1;

    $("#imgUpload").fileinput({
            language: 'zh',
            showUpload: false,
            showRemove: false,
            showCancel: false,
            showCaption: false,
            showUploadedThumbs: false,
            maxFileCount: 30,
            previewFileType: "image",
            allowedFileExtensions: ["jpg", "jpeg", "tif", "tiff"],
            msgInvalidFileExtension: '不支持文件类型"{name}"。只支持扩展名为"{extensions}"的文件。',
            browseClass: "btn btn-primary",
            browseLabel: "选择本地全景图片",
            // browseIcon: "<i class=\"icon icon-picture\"></i> ",
            removeClass: "btn btn-danger",
            removeLabel: "删除",
            // removeIcon: "<i class=\"icon icon-trash\"></i> ",
            uploadUrl: '/api/upload',
            uploadAsync: true,
            fileActionSettings: {},
            dropZoneTitle: "拖拽一组/单幅图片或点击下面按钮上传",
            textEncoding: "UTF-8",
            uploadExtraData: function (previwId) {
                var data = {
                    title: $.trim($("#pname").val()),
                    timestamp: timestamp
                }
                if (previwId != null) {
                    data.index = index++;
                }

                return data;
            }
        }
    ).on("fileuploaded", function (event, data, index) {
        var response = data.response;
        if (response != null && response.status == 'success') {
            console.log(index);
            $("#publish_img").attr("disabled", false);
        } else {
            alert('保存失败！');
        }
    });

    $("#upload_img").click(function () {
        timestamp = new Date().getTime();
        var files = $('#imgUpload').fileinput('getFileStack');
        if (files.length > 0) {
            $("#imgUpload").fileinput("upload");
        }
    })

    $("#publish_img").click(function () {
        var $this = $(this);
        $this.button('loading');
        $.ajax({
            url: '/api/add',
            type: "post",
            dataType: "json",
            data: {
                timestamp: timestamp
            },
            error: function (error) {
                console.log(error)
            },
            success: function (data) {
                if (data.status == "success") {
                    var temp = timestamp;
                    timestamp = 0;
                    $this.button('reset');
                    $this.attr("disabled", false);
                    window.location = "/data/" + temp + "/vtour/tour_editor.html?title=" + temp;
                }
            }
        })
    })

</script>
</html>